<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />
    <title>Script</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }
      h1 {
        margin: 0 0 15px 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        padding: 16px 8px;
      }
      a:link,
      a:visited {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        background-color: #eee;
      }
      li {
        display: flex;
        margin: 15px 0;
      }
      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
    </style>
    <script>
      partytown = {
        logCalls: true,
        logGetters: true,
        logSetters: true,
        logStackTraces: false,
        logScriptExecution: true,
        logMainAccess: true,
      };
    </script>
    <script src="/~partytown/debug/partytown.js"></script>
  </head>
  <body>
    <h1 class="title">Script</h1>
    <ul>
      <li>
        <strong>JSONP</strong>
        <code id="testJSONP"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            jsonpA = function (data) {
              const elm = document.getElementById('testJSONP');
              elm.textContent = data.mph;
              script.remove();
              elm.className = 'testJSONP';
            };
            script.dataset.testjsonp = true;
            script.src = './whatever/plz/resolve/../../../jsonp-a.js';
            document.head.appendChild(script);
          })();
        </script>
      </li>

      <li>
        <strong>onload</strong>
        <code id="testOnLoad"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testOnLoad');
            const script = document.createElement('script');
            script.onload = function (ev) {
              script.parentElement.removeChild(script);
              elm.className = 'testOnLoad';
            };
            jsonpB = function (data) {
              elm.textContent = data.mph;
            };
            script.dataset.testonload = true;
            script.src = './jsonp-b.js';
            document.head.appendChild(script);
          })();
        </script>
      </li>

      <li>
        <strong>addEventListener('load')</strong>
        <code id="testAddEventListenerLoad"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testAddEventListenerLoad');
            const script = document.createElement('script');
            script.addEventListener('load', (ev) => {
              script.parentElement.removeChild(script);
              elm.className = 'testAddEventListenerLoad';
            });
            jsonpC = function (data) {
              elm.textContent = data.mph;
            };
            script.src = './jsonp-c.js';
            document.head.appendChild(script);
          })();
        </script>
      </li>

      <li>
        <strong>onerror</strong>
        <code id="testOnError"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testOnError');
            const script = document.createElement('script');
            script.onerror = function (ev) {
              script.parentElement.removeChild(script);
              elm.className = 'testOnError';
              elm.textContent = ev.type;
            };
            script.src = './image/404.gif';
            document.head.appendChild(script);
          })();
        </script>
      </li>

      <li>
        <strong>addEventListener('error')</strong>
        <code id="testAddEventListenerError"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testAddEventListenerError');
            const script = document.createElement('script');
            script.addEventListener('error', (ev) => {
              script.parentElement.removeChild(script);
              elm.className = 'testAddEventListenerError';
              elm.textContent = ev.type;
            });
            script.src = './image/404.gif';
            document.head.appendChild(script);
          })();
        </script>
      </li>

      <li>
        <strong>set innerHTML, window.someWindowVar</strong>
        <code id="testInnerHTML"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testInnerHTML');
            const script = document.createElement('script');
            script.innerHTML = `
              window.someWindowVar = 88;
            `;
            document.head.appendChild(script);
            elm.textContent = window.someWindowVar;
            elm.className = 'testInnerHTML';
          })();
        </script>
      </li>

      <li>
        <strong>set textContent, window.someWindowVar</strong>
        <code id="testTextContent"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testTextContent');
            const script = document.createElement('script');
            script.textContent = `
              window.someWindowVar = 99;
            `;
            document.head.appendChild(script);
            elm.textContent = window.someWindowVar;
            elm.className = 'testTextContent';
          })();
        </script>
      </li>

      <li>
        <strong>set innerText, window.someWindowVar</strong>
        <code some-attr="101" id="testInnerText"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testInnerText');
            const script = document.createElement('script');
            script.innerText = `
              const elm = document.getElementById('testInnerText');
              window.someWindowVar = elm.getAttribute('some-attr');
            `;
            document.head.appendChild(script);
            elm.textContent = window.someWindowVar;
            elm.className = 'testInnerText';
          })();
        </script>
      </li>

      <li>
        <strong>set innerHTML, someGlobalVar</strong>
        <code some-attr="111" id="testInnerHTMLGlobalVar"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testInnerHTMLGlobalVar');
            const script = document.createElement('script');
            script.innerText = `
              const elm = document.getElementById('testInnerHTMLGlobalVar');
              someGlobalVar = elm.getAttribute('some-attr');
            `;
            document.head.appendChild(script);
            elm.textContent = someGlobalVar;
            elm.className = 'testInnerHTMLGlobalVar';
          })();
        </script>
      </li>

      <li>
        <strong>set innerHTML, error</strong>
        <code id="testInnerHTMLError"></code>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testInnerHTMLError');
            const script = document.createElement('script');
            script.id = 'pt-error';
            script.innerText = `
              throw 'gahh';
            `;
            document.head.appendChild(script);
            const scriptElm = document.getElementById('pt-error');
            elm.textContent = scriptElm.getAttribute('data-pterror')
            elm.className = 'testInnerHTMLError';
          })();
        </script>
      </li>

      <li>
        <strong>set innerHTML, nested</strong>
        <code some-attr="111" id="testInnerHTMLNested"></code>
        <script type="text/partytown">
          (function () {
            const testEl = document.getElementById('testInnerHTMLNested');
            const parent = document.createElement('div');
            parent.innerHTML = '<script>console.log(42);<\/script>';

            testEl.innerHTML = [
              parent.firstChild.tagName,
              parent.firstChild.innerHTML
            ].join(', ');
            testEl.className = 'testInnerHTMLNested';
          })();
        </script>
      </li>

      <li>
        <strong>async/defer</strong>
        <code id="testAsync"></code>
        <script src="defer-1.js" defer type="text/partytown"></script>
        <script src="async-1.js" async type="text/partytown"></script>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testAsync');
            elm.textContent += 'b1';
          })();
        </script>
        <script src="async-2.js" async type="text/partytown"></script>
        <script src="defer-2.js" async defer type="text/partytown"></script>
        <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testAsync');
            elm.textContent += ' b2';
          })();
        </script>
      </li>

      <li>
        <strong>set/getAttribute('src')</strong>
        <code id="testSrcAttr"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            script.onload = () => {
              const elm = document.getElementById('testSrcAttr');
              elm.className = 'testSrcAttr';
              elm.textContent = script.getAttribute('src');
            };
            script.setAttribute('src', 'set-get-attr.js');
            document.head.appendChild(script);
          })();
        </script>
      </li>

      <li>
        <strong>type="text/javascript"</strong>
        <code id="testSetPropType"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            script.type = 'text/javascript';
            document.head.appendChild(script);
            const elm = document.getElementById('testSetPropType');
            elm.textContent = script.type;
            elm.className = 'testSetPropType';
          })();
        </script>
      </li>

      <li>
        <strong>type=""</strong>
        <code id="testSetPropTypeEmpty"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            script.type = '';
            document.head.appendChild(script);
            const elm = document.getElementById('testSetPropTypeEmpty');
            elm.textContent = script.type;
            elm.className = 'testSetPropTypeEmpty';
          })();
        </script>
      </li>

      <li>
        <strong>setAttribute("type", "text/javascript")</strong>
        <code id="testSetAttrType"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            script.type = 'text/javascript';
            document.head.appendChild(script);
            const elm = document.getElementById('testSetAttrType');
            elm.textContent = script.type;
            elm.className = 'testSetAttrType';
          })();
        </script>
      </li>

      <li>
        <strong>setAttribute("type", "")</strong>
        <code id="testSetAttrTypeEmpty"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            script.type = '';
            document.head.appendChild(script);
            const elm = document.getElementById('testSetAttrTypeEmpty');
            elm.textContent = script.type;
            elm.className = 'testSetAttrTypeEmpty';
          })();
        </script>
      </li>

      <li>
        <strong>set non-javascript type</strong>
        <code id="testNonJsType"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            script.type = 'application/ld+json';
            script.innerHTML = JSON.stringify({ mph: 88 });
            document.head.appendChild(script);
            const elm = document.getElementById('testNonJsType');
            elm.textContent = script.type;
            elm.className = 'testNonJsType';
          })();
        </script>
      </li>

      <li>
        <strong>sourceMappingURL</strong>
        <code id="testSourceMappingURL"></code>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
            script.src = 'source-mapping-url.js';
            document.head.appendChild(script);
          })();
        </script>
      </li>

      <li>
        <strong>appendMainScript</strong>
        <code id="testAppendMainScript"></code>
        <script type="text/javascript">
          (function () {
            window.addEventListener('load', () => {
              setTimeout(() => {
                const script = document.createElement('script');
                script.type = 'text/partytown';
                script.innerHTML = `
                  document.getElementById('testAppendMainScript').textContent = 'ptupdate';
                  document.getElementById('testAppendMainScript').className = 'testAppendMainScript';
                `;
                document.head.appendChild(script);
                window.dispatchEvent(new CustomEvent('ptupdate'));
              }, 500);
            });
          })();
        </script>
      </li>
      <li>
        <strong>script cloneNode</strong>
        <code id="testSrcCloneNode"></code>
        <script src="script-1.js" type="text/partytown"></script>
        <script type="text/partytown">
          (function () {
            const scriptElm = document.querySelector("script[src='script-1.js']");
            const scriptCloneElm = scriptElm.cloneNode(true);
            const elm = document.getElementById('testSrcCloneNode');
            elm.textContent = scriptCloneElm.src;
            elm.className = 'testSrcCloneNode';
          })();
        </script>
      </li>
    </ul>

    <hr />
    <p><a href="/tests/">All Tests</a></p>
  </body>
</html>
